<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-container>
    <el-header style="background-color: #0095d7">
        <h1 style="color: white;font-size: 22px">
            CoolShark商店后台管理系统
            <span style="float: right">欢迎xxx回来!<a href="">退出登录</a></span>
        </h1>
    </el-header>
    <el-container>
        <el-aside width="200px">
            <!--********导航菜单开始**********-->
            <el-menu @select="handleSelect" class="el-menu-vertical-demo">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-flag"></i>
                        <span>分类管理</span>
                    </template>
                    <el-menu-item index="1-1">分类列表</el-menu-item>
                    <el-menu-item index="1-2">添加分类</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-picture"></i>
                        <span>轮播图管理</span>
                    </template>
                    <el-menu-item index="2-1">轮播图列表</el-menu-item>
                    <el-menu-item index="2-2">轮播图列表</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-2"></i>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="3-1">商品列表</el-menu-item>
                    <el-menu-item index="3-2">添加商品</el-menu-item>
                </el-submenu>
            </el-menu>
            <!--********导航菜单结束**********-->
        </el-aside>
        <el-main>
            <!--***********分类列表开始**********-->
            <el-table v-if="currentIndex=='1-1'" :data="categoryArr" style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <!--prop=properties属性-->
                <el-table-column
                prop="name"
                label="分类名称"
                width="180">
                </el-table-column>
                <!--***************-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <!--**********************-->
            </el-table>
            <!--***********分类列表结束**********-->
            <!--***********轮播图表格开始********-->
            <el-table v-if="currentIndex=='2-1'":data="bannerArr" style="width: 100%">
            <el-table-column
            type="index"
            label="序号"
            width="50">
            </el-table-column>
            <!--prop=properties属性-->
            <el-table-column
            label="轮播图"
            width="300">
              <!--scope.row得到的是bannerArr数组对应的轮播图对象-->
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="100%" alt="">
                </template>
            </el-table-column>
            <!--***********************-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <!--***************-->
            </el-table>
            <!--***********轮播图表格结束********-->
            <!--***********商品表格开始**********-->
            <el-table v-if="currentIndex=='3-1'" :data="productArr" style="width: 100%">
                <el-table-column
                type="index"
                label="序号"
                width="50">
                </el-table-column>
                <!--prop=properties属性-->
                <el-table-column label="商品标题" width="200" prop="title"></el-table-column>
                <el-table-column label="价格" width="100" prop="price"></el-table-column>
                <el-table-column label="原价" width="100" prop="oldPrice"></el-table-column>
                <el-table-column label="销量" width="100" prop="saleCount"></el-table-column>
                <el-table-column
                label="商品图片"
                width="100">
                    <!--scope.row得到的是bannerArr数组中对应的轮播图对象-->
                    <template slot-scope="scope">
                        <img :src="scope.row.url" width="100%" alt="">
                    </template>
                </el-table-column>
                <!--**********************-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--***********商品表格结束**********-->
        </el-main>
    </el-container>
</el-container>
</div>
</body>
<!--引入Axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                currentIndex:"",
                categoryArr:[],
                bannerArr:[],
                productArr:[]
            }
        },
        methods:{
            handleSelect(key,keyPath){
                if (key=="1-2"){

                }else if (key=="2-2"){
                    v.$message("添加轮播图");
                }else if (key=="3-2"){
                    location.href="/insertProduct.html"
                }else{
                    v.currentIndex=key;
                }
            }
        },
        created:function () {
            axios.get("/category/select").then(function (response) {
                v.categoryArr=response.data
            })
            axios.get("/banner/select").then(function (response) {
                v.bannerArr=response.data
            })
            axios.get("/product/select/index").then(function (response) {
                v.productArr=response.data
            })
        }
    })
</script>
</html>